<template>
  <div>
    <header class="header">
        <h3>NDIP实时监控平台</h3>
    </header>

    <div class="wrapper">
      <div class="container-fluid">
        <div class="row fill-h">
          <div class="col-lg-3 fill-h">
            <div class="xpanel-wrapper xpanel-wrapper-2">
              <div class="xpanel" style="">
                <div style="height: 10%">
                  <span style="color: #5d9afd;font-size: 18px;font-weight: bold;">实时纳入情况</span>
                </div>
                <div id="inclusion-content" style="height: 90%;overflow-y: auto;overflow-x: hidden; margin-top: 1.5vh; color: #a5bdbe; font-size: 14px;">
                    <tr v-for="item in patientInclusionArr" style="line-height: 4vh;">{{item}}</tr>
                    <tr>...</tr>
                </div>
              </div>
            </div>
            <div class="xpanel-wrapper xpanel-wrapper-2">
              <div class="xpanel" style="overflow: hidden;">
                <div style="height: 10%">
                  <span style="color: #5d9afd;font-size: 18px;font-weight: bold;">不良事件实时情况</span>
                </div>
                <div id="adverse-content" style="height: 90%;overflow-y: auto;overflow-x: hidden; margin-top: 1.5vh; color: #a5bdbe; font-size: 14px;">
                    <tr v-for="item in adverseReactionArr" style="line-height: 4vh;">{{item}}</tr>
                    <tr>...</tr>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 fill-h">
            <div class="xpanel-wrapper xpanel-wrapper-1">
              <div class="xpanel">
                <div style="height: 18%">
                  <div id="time" style="font-size: 3.5vh;font-weight: bold; color:#fff ;text-align: center; "></div>
                  <div id="" style="font-size: 1vw;font-weight: bold; color:#61a0a8 ;text-align: center;margin-top: 20px ">
                    <span>纳入病例总数：</span><span style="margin-right: 15px;color: #a5bdbe;">{{total[0]}}</span>
                    <span>贝达喹啉治疗期病例总数：</span><span style="margin-right: 15px;color: #a5bdbe;">{{total[2]}}</span>
                    <span>完成治疗病例总数：</span><span style="margin-right: 15px;color: #a5bdbe;">{{total[1]}}</span>
                    <span>退出患者总数：</span><span style="color: #a5bdbe;">{{total[3]}}</span>
                  </div>
                </div>
                <!-- 地图散点 -->
                <div class="fill-h" id="scatterMap" style="height: 82%;min-height: 75%"></div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 fill-h">
            <div class="xpanel-wrapper xpanel-wrapper-3">
              <div class="xpanel">
                <!-- 省份地图 -->
                <div class="fill-h" id="provinceMap"></div>
              </div>
            </div>
            <div class="xpanel-wrapper xpanel-wrapper-3">
              <div class="xpanel">
                <!-- 城市地图 -->
                <div class="fill-h" id="cityMap"></div>
              </div>
            </div>
            <div class="xpanel-wrapper xpanel-wrapper-3">
              <div class="xpanel">
                <!-- 区县地图 -->
                <div class="fill-h" id="countyMap"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'echarts/map/js/china.js';
export default {
  name: 'DataShow',
  data () {
    return {
      patientInclusionData:{},
      adverseReactionData:{},
      treatmentResultData:{},
      scatterMapData:{},
      patientInclusionArr:[],
      adverseReactionArr:[],
      timer:null,
      total:[]
    }
  },
  mounted () {
      var _this = this
      _this.initData()
      _this.time()
      _this.timer = setInterval(_this.time,1000)
      setInterval(function(){
        _this.$axios.get('/api/v1/hospital/monitoring_data').then(function(res){
            _this.patientInclusionData = res.data.data.patientInclusionCharts
            _this.adverseReactionData = res.data.data.adverseReactionCharts
            _this.treatmentResultData = res.data.data.treatmentResultCharts
            _this.scatterMapData = res.data.data.scatterMapCharts
            _this.patientInclusionArr = res.data.data.patientInclusionInfo
            _this.adverseReactionArr = res.data.data.adverseReactionInfo
            _this.total = res.data.data.totalInfo
        })
      },300000)
  },
  beforeDestroy () {
    var _this = this
    if (_this.timer) {
      clearInterval(_this.timer)
    }
  },
  methods:{
    scroll (id) {
      var height = document.getElementById(id).scrollHeight - document.getElementById(id).clientHeight + 30
      var number = 0;  //控制结束累加器
      var length = 0;  //控制每次翻滚长度
      var frequency = 4000;    //控制总时间
      var time = setInterval(function(){
          number += 1;
          if(number == frequency + 1){
            number = 0
            length = 0
            document.getElementById(id).scrollTop = 0;
            return
          } else {
              length += height / frequency;
              document.getElementById(id).scrollTop = length;
          }
        },5)
    },
    initData () {
      var _this = this
      _this.$axios.get('/api/v1/hospital/monitoring_data').then(function(res){

          _this.patientInclusionData = res.data.data.patientInclusionCharts
          _this.adverseReactionData = res.data.data.adverseReactionCharts
          _this.treatmentResultData = res.data.data.treatmentResultCharts
          _this.scatterMapData = res.data.data.scatterMapCharts
          _this.patientInclusionArr = res.data.data.patientInclusionInfo
          _this.adverseReactionArr = res.data.data.adverseReactionInfo
          _this.total = res.data.data.totalInfo
          _this.patientInclusionCharts()
          _this.adverseReactionCharts()
          _this.treatmentResultCharts()
          _this.scatterMapCharts()
          setTimeout(function(){return _this.scroll('inclusion-content')},3000)
          setTimeout(function(){return _this.scroll('adverse-content')},3000)
      })
      .catch(function(error) {
        if (error.response) {
          switch (error.response.status) {
              case 401: //未授权
              _this.$router.push("/");
            // 返回 401 清除token信息并跳转到登录页面
          }
        }
      });
    },
    time () {

    var today,hour,second,minute,year,month,date;

    var strDate ;

    today=new Date();

    var n_day = today.getDay();

    switch (n_day){
        case 0:{
          strDate = "星期日"
        }break;
        case 1:{
          strDate = "星期一"
        }break;
        case 2:{
          strDate ="星期二"
        }break;
        case 3:{
          strDate = "星期三"
        }break;
        case 4:{
          strDate = "星期四"
        }break;
        case 5:{
          strDate = "星期五"
        }break;
        case 6:{
          strDate = "星期六"
        }break;
        case 7:{
          strDate = "星期日"
        }break;
    }

    year = today.getFullYear();
    month = today.getMonth()+1;
    date = today.getDate();
    hour = today.getHours();
    minute =today.getMinutes();
    second = today.getSeconds();

    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (date >= 0 && date <= 9) {
        date = "0" + date;
    }
    if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
    }
    if (minute >= 0 && minute <= 9) {
        minute = "0" + minute;
    }
    if (second >= 0 && second <= 9) {
        second = "0" + second;
    }
    document.getElementById('time').innerHTML =   year + "年" + month + "月" + date + "日" +"  "+ "   " + hour + ":" + minute + ":" + second;
    },
    patientInclusionCharts () {
      const patientInclusionCharts = echarts.init(document.getElementById("provinceMap"));
      const patientInclusionOpt = {
        title: {
              text: '患者纳入情况',
              left: 'center',
              textStyle: {
                color: '#5d9afd',
              }
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          grid: {
              left: '4%',
              right: '4%',
              bottom: '0%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  data: this.patientInclusionData.date,
                  axisLabel:{
                      color: '#a5bdbe',
                      fontSize: 7,
                      interval: 0
                  },
                  axisTick:{
                      interval:0
                  },
                  axisLine:{
                      lineStyle:{
                          color: '#a5bdbe'
                      }
                  }
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: '患者纳入数',
                  axisPointer: {
                      type: 'shadow'
                  },
                  axisLabel:{
                      color: '#a5bdbe',
                      fontSize: 12
                  },
                  axisLine:{
                      lineStyle:{
                          color: '#a5bdbe'
                      }
                  }
              }
          ],
          series: [
              {
                  name:'新增纳入',
                  type:'bar',
                  itemStyle:{
                      normal:{
                          color:"#3398DB"
                      }
                  },
                  data:this.patientInclusionData.number.new
              },
              {
                  name:'累计纳入',
                  type:'line',
                  data:this.patientInclusionData.number.total
              }
          ]
      };
      patientInclusionCharts.setOption(patientInclusionOpt)
    },
    adverseReactionCharts () {
      const adverseReactionCharts = echarts.init(document.getElementById("cityMap"));

      const adverseReactionOpt = {
          title: {
              text: '不良事件情况',
              left: 'center',
              textStyle: {
            color: '#5d9afd'
          }
          },
          tooltip : {
              trigger: 'item'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '0%',
              containLabel: true
          },
          legend: {
              type: 'scroll',
              orient: 'vertical',
              left: 10,
              top: 20,
              bottom: 0,
              itemGap: 4,
              itemWidth: 12,
              itemHeight: 8,
              pageIconSize: 6,
              pageIconColor: "#aaa",
              pageIconInactiveColor: "#2f4554",
              textStyle:{
                  color: "#a5bdbe",
                  fontSize:12
              },
              pageTextStyle:{
                  color: "#a5bdbe",
                  fontSize:10
              },
              data:  this.adverseReactionData.category
          },
          color: ['#2f4554','#c23531', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
          series : [
              {
                  type:'pie',
                          center:["65%",'58%'],
                  data: this.adverseReactionData.data,
                  label:{
                      normal:{
                          show:false
                      }
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },
              }
          ]
      };
      adverseReactionCharts.setOption(adverseReactionOpt)
    },
    treatmentResultCharts () {
      const treatmentResultCharts = echarts.init(document.getElementById("countyMap"));

      const treatmentResultOpt = {
          title: {
                text: '治疗结局情况',
                left: 'center',
                textStyle: {
              color: '#5d9afd'
            }
            },
          tooltip : {
              trigger: 'item'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '0%',
              containLabel: true
          },
          legend: {
              type: 'scroll',
              orient: 'vertical',
              left: 10,
              top: 20,
              bottom: 0,
              itemGap: 4,
              itemWidth: 12,
              itemHeight: 8,
              pageIconSize: 6,
              pageIconColor: "#aaa",
              pageIconInactiveColor: "#2f4554",
              textStyle:{
                  color: "#a5bdbe",
                  fontSize:12
              },
              pageTextStyle:{
                  color: "#a5bdbe",
                  fontSize:12
              },
              data: this.treatmentResultData.catogery
          },
          color: ['#61a0a8','#2f4554', '#c23531', '#d48265', '#91c7ae','#749f83','#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
          series : [
              {
                  type: 'pie',
                  center: ["65%",'58%'],
                  data: this.treatmentResultData.data,
                  label: {
                      normal:{
                          show:false
                      }
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },
              }
          ]
      };
      treatmentResultCharts.setOption(treatmentResultOpt)
    },
    scatterMapCharts () {
      var _this = this
      //初始化echarts实例
        const scatterMap = echarts.init(document.getElementById("scatterMap"));
        //城市数据
        const scatterVal1 = _this.scatterMapData.orgnization1
        const scatterVal2 = _this.scatterMapData.orgnization2
        const scatterVal3 = _this.scatterMapData.orgnization3
        const series =  [{
            name: '第一批入组医院',
            id: 1,
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 12,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                emphasis: {
                    borderColor: '#a5bdbe',
                    borderWidth: 1
                }
            },
            data: scatterVal1
        },{
            name: '第二批入组医院',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 12,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color:'#DA70D6'
                },
                emphasis: {
                    borderColor: '#a5bdbe',
                    borderWidth: 1
                }
            },
            data: scatterVal2
        },{
          name: '第三批入组医院',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbolSize: 12,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color:'#32CD32'
            },
            emphasis: {
              borderColor: '#a5bdbe',
              borderWidth: 1
            }
          },
          data: scatterVal3
        }]

        const legendData = ['第一批入组医院','第二批入组医院','第三批入组医院']
        const legendSelected = {'第一批入组医院':true,'第二批入组医院':true,'第三批入组医院':true}

        for (var key in _this.scatterMapData.patientSource) {
          series.push({
            name: key + '患者来源',
            type: 'lines',
            effect: {
                show: true, period: 4, trailLength: 0, symbol: 'arrow', symbolSize: 7,
            },
            lineStyle: {
                normal: {width: 2, opacity: 0.6, curveness: 0.2, color: '#87CEFA'}
            },
            data: _this.scatterMapData.patientSource[key].line
          },{
            name: key + '来源城市',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 6,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color:'#7A378B'
                }
            },
            data: _this.scatterMapData.patientSource[key].scatter
          })

          legendData.push('b|' + key + '患者来源')
          legendData.push('b|' + key + '来源城市')
          legendSelected[key + '患者来源'] = false
          legendSelected[key + '来源城市'] = false
        }
        //地图配置项
        const sactterMapOpt = {
          title: {
            x: 'center',
            textStyle: {
              color: '#5d9afd'
            },
            subtextStyle: {
                rich: {
                    a: {
                        color: '#a5bdbe',
                        lineHeight: 20
                    }
                }
            }
          },
          legend: {
            data: legendData,
            selected: legendSelected,
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            textStyle: {
                color: '#a5bdbe',
                        rich: {
                            b: {
                                display: 'none'
                            }
                        }
            }
          },
          tooltip: {
              trigger: 'item',
              triggerOn: 'click',
              formatter: function(params) {
                if (params.seriesType == 'scatter') {
                    return params.name + '<br />纳入病例数：' + params.value[2] + '<br />贝达喹啉治疗期病例数：' + params.value[4] + '<br />完成治疗病例数：' + params.value[3] + '<br />退出患者数：' + params.value[5];
                }
              }
          },
          geo: {
            map: 'china',
            roam: false, //开启鼠标缩放和漫游
            zoom: 1, //地图缩放级别
            selectedMode: false, //选中模式：single | multiple
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            layoutCenter: ['50%', '45%'], //设置后left/right/top/bottom等属性无效
            layoutSize: '110%',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#101f32',
                        borderWidth: 1.1,
                        borderColor: '#43d0d6'
                    },
                    emphasis: {
                        areaColor: '#069'
                    }
                }
            },
            series: series
        };
        scatterMap.on('click', function (params) {
          for (var key in _this.scatterMapData.patientSource) {
            if (params.name == key) {
                scatterMap.dispatchAction({
                    type: 'legendSelect',
                    name: key + '患者来源'
                })
                scatterMap.dispatchAction({
                    type: 'legendSelect',
                    name: key + '来源城市'
                })
                scatterMap.dispatchAction({
                    type: 'highlight',
                    name: key
                })
            }
          }

        })
        scatterMap.on('mouseout', function (params) {
          for (var key in _this.scatterMapData.patientSource) {
            if (params.name == key) {
                scatterMap.dispatchAction({
                    type: 'legendUnSelect',
                    name: key + '患者来源'
                })
                scatterMap.dispatchAction({
                    type: 'legendUnSelect',
                    name: key + '来源城市'
                })
                scatterMap.dispatchAction({
                    type: 'downplay',
                    name: key
                })
            }
          }

        })
        //渲染报表
        scatterMap.setOption(sactterMapOpt);
    }
  }
}
</script>

<style scoped>
</style>
